<template>
    <div class="detail-view">
        <div class="container">
            <div class="back-button">
                <el-button @click="goBack" type="primary" plain>
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    返回
                </el-button>
            </div>

            <el-card class="article-card" shadow="never" v-loading="loading">
                <div class="article-header">
                    <h1 class="article-title">{{ article.title }}</h1>

                    <div class="article-meta">
                        <div class="meta-item">
                            <el-avatar :size="40" :src="authorAvatar">
                                <el-icon>
                                    <User />
                                </el-icon>
                            </el-avatar>
                            <div class="author-info">
                                <span class="author-name">{{ article.author }}</span>
                                <span class="publish-date">{{ formatime(article.createAt) }}</span>
                            </div>
                        </div>

                        <div class="meta-actions">
                            <el-tag :type="getCategoryType(article.cate)" size="large">
                                {{ article.cate }}
                            </el-tag>
                        </div>
                    </div>
                </div>

                <div class="article-cover" v-if="article.src">
                    <el-image :src="article.src" :alt="article.title" fit="cover" lazy>
                        <template #error>
                            <div class="image-error">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>
                </div>

                <div class="article-content" v-html="article.content"></div>

                <div class="article-tags" v-if="article.tag">
                    <el-icon>
                        <Collection />
                    </el-icon>
                    <span>标签：</span>
                    <el-tag v-for="tag in tags" :key="tag" type="info" effect="plain" round>
                        {{ tag }}
                    </el-tag>
                </div>

                <div class="article-footer">
                    <el-divider />
                    <div class="footer-actions">
                        <el-button :type="isFavorite ? 'primary' : 'default'" :icon="Star" @click="handleFavorite"
                            :disabled="!isLoggedIn">
                            {{ isFavorite ? '已收藏' : '收藏' }}
                            <span v-if="favoriteCount > 0" class="count-badge">({{ favoriteCount }})</span>
                        </el-button>
                        <el-button type="success" :icon="ChatDotRound" @click="scrollToComments"
                            :disabled="!isLoggedIn">
                            评论
                            <span v-if="commentTotal > 0" class="count-badge">({{ commentTotal }})</span>
                        </el-button>
                        <el-button type="info" :icon="Share" plain>分享</el-button>
                    </div>
                </div>
            </el-card>

            <div class="related-articles">
                <el-card shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>相关推荐</span>
                        </div>
                    </template>
                    <div class="related-list">
                        <el-empty description="暂无相关推荐" />
                    </div>
                </el-card>
            </div>

            <el-card class="comments-card" shadow="never">
                <template #header>
                    <div class="card-header">
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        <span>评论区 ({{ commentTotal }})</span>
                    </div>
                </template>

                <div class="comment-input-section">
                    <div v-if="!isLoggedIn" class="login-prompt">
                        <el-alert title="请先登录" description="登录后即可发表评论" type="info" :closable="false" show-icon>
                            <template #default>
                                <el-button type="primary" size="small" @click="goToLogin">立即登录</el-button>
                            </template>
                        </el-alert>
                    </div>
                    <div v-else class="comment-form">
                        <div class="form-header">
                            <el-avatar :size="40" :src="userAvatar">
                                <el-icon>
                                    <User />
                                </el-icon>
                            </el-avatar>
                            <span class="username">{{ username }}</span>
                        </div>
                        <el-input v-model="commentContent" type="textarea" :rows="4" placeholder="写下你的评论..."
                            maxlength="500" show-word-limit class="comment-textarea" />
                        <div class="form-actions">
                            <el-button type="primary" @click="submitComment" :loading="submitting"
                                :disabled="!commentContent.trim()">
                                发表评论
                            </el-button>
                            <el-button v-if="replyingTo" @click="cancelReply">取消回复</el-button>
                        </div>
                        <div v-if="replyingTo" class="reply-info">
                            正在回复: <span class="reply-name">@{{ replyingTo.username }}</span>
                        </div>
                    </div>
                </div>

                <div class="comments-list" v-loading="commentsLoading">
                    <div v-if="comments.length === 0 && !commentsLoading" class="empty-comments">
                        <el-empty description="暂无评论，快来发表第一条评论吧~" />
                    </div>
                    <div v-else class="comment-items">
                        <div v-for="comment in comments" :key="comment.id" class="comment-item">
                            <div class="comment-main">
                                <el-avatar :size="40" :src="getUserAvatar(comment.username)">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </el-avatar>
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <span class="comment-author">{{ comment.username }}</span>
                                        <span class="comment-time">{{ formatime(comment.createAt) }}</span>
                                    </div>
                                    <div class="comment-text">{{ comment.content }}</div>
                                    <div class="comment-actions">
                                        <el-button text type="primary" size="small" @click="replyToComment(comment)"
                                            :disabled="!isLoggedIn">
                                            回复
                                        </el-button>
                                        <el-button v-if="isMyComment(comment.user_id)" text type="danger" size="small"
                                            @click="handleDeleteComment(comment.id)">
                                            删除
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-if="comment.replies && comment.replies.length > 0" class="replies-list">
                                <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                                    <el-avatar :size="32" :src="getUserAvatar(reply.username)">
                                        <el-icon>
                                            <User />
                                        </el-icon>
                                    </el-avatar>
                                    <div class="reply-content">
                                        <div class="reply-header">
                                            <span class="reply-author">{{ reply.username }}</span>
                                            <span class="reply-time">{{ formatime(reply.createAt) }}</span>
                                        </div>
                                        <div class="reply-text">
                                            <span v-if="reply.parent_username" class="reply-to">@{{
                                                reply.parent_username }}</span>
                                            {{ reply.content }}
                                        </div>
                                        <div class="reply-actions">
                                            <el-button text type="primary" size="small"
                                                @click="replyToComment(comment, reply)" :disabled="!isLoggedIn">
                                                回复
                                            </el-button>
                                            <el-button v-if="isMyComment(reply.user_id)" text type="danger" size="small"
                                                @click="handleDeleteComment(reply.id)">
                                                删除
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="hasMoreComments" class="load-more-comments">
                        <el-button type="primary" text @click="loadMoreComments" :loading="loadingMore">
                            加载更多评论
                        </el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import {
    articleDetail,
    host,
    addComment,
    getCommentList,
    deleteComment,
    addFavorite,
    removeFavorite,
    checkFavorite,
    getFavoriteCount,
    getCurrentUserDetail
} from '@/api/index'
import { reactive, watch, ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    ArrowLeft,
    User,
    Picture,
    Collection,
    Star,
    ChatDotRound,
    Share,
    Document
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const commentsLoading = ref(false)
const submitting = ref(false)
const loadingMore = ref(false)

interface IItem {
    author: string
    cate: string
    cate_name: string
    content: string
    createAt: string
    id: number
    src: string
    tag: string
    title: string
}

let article = reactive<IItem>({
    author: "",
    cate: "",
    cate_name: "",
    content: "",
    createAt: "",
    id: 0,
    src: "",
    tag: "",
    title: "",
})

const comments = ref<any[]>([])
const commentTotal = ref(0)
const commentContent = ref('')
const replyingTo = ref<any>(null)
const commentPageNum = ref(1)
const commentPageSize = ref(10)
const hasMoreComments = ref(false)
const currentUserId = ref<number | null>(null)
const username = ref('')
const userAvatar = ref('')

const isFavorite = ref(false)
const favoriteCount = ref(0)

const isLoggedIn = computed(() => {
    return !!localStorage.getItem('AUTO_TOKEN')
})

const authorAvatar = computed(() => {
    return `https://api.dicebear.com/7.x/initials/svg?seed=${article.author}`
})

const tags = computed(() => {
    return article.tag ? article.tag.split(',').map(t => t.trim()).filter(t => t) : []
})

const goBack = () => {
    router.go(-1)
}

const getImageUrl = (src: string) => {
    if (!src) return ''
    if (src.startsWith('http://') || src.startsWith('https://')) {
        return src
    }
    const urlPath = src.startsWith('/') ? src : '/' + src
    return host + urlPath
}

const formatime = (createAt: string) => {
    if (!createAt) return ''
    const date = new Date(createAt)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const getCategoryType = (cate: string): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
    const typeMap: Record<string, 'success' | 'warning' | 'danger'> = {
        '工作生活': 'success',
        '技能学习': 'warning',
        '兴趣爱好': 'danger'
    }
    return typeMap[cate] || 'info'
}

const getUserInfo = async () => {
    if (!isLoggedIn.value) return
    try {
        const resData = await getCurrentUserDetail()
        if (resData && resData.code === 200 && resData.data) {
            currentUserId.value = resData.data.id
            username.value = resData.data.username || '用户'
            userAvatar.value = resData.data.imgUrl ? getImageUrl(resData.data.imgUrl) : ''
        }
    } catch (error) {
        console.error('获取用户信息失败:', error)
    }
}

const getUserAvatar = (username: string) => {
    return `https://api.dicebear.com/7.x/initials/svg?seed=${username}`
}

const isMyComment = (userId: number) => {
    return currentUserId.value !== null && userId === currentUserId.value
}

const loadComments = async (isLoadMore = false) => {
    if (!article.id) return
    commentsLoading.value = true
    try {
        const resData = await getCommentList({
            article_id: article.id,
            page_num: isLoadMore ? commentPageNum.value : 1,
            page_size: commentPageSize.value
        })
        if (resData && resData.code === 200) {
            if (isLoadMore) {
                comments.value = [...comments.value, ...(resData.data || [])]
            } else {
                comments.value = resData.data || []
                commentPageNum.value = 1
            }
            commentTotal.value = resData.total || 0
            hasMoreComments.value = comments.value.length < commentTotal.value
        }
    } catch (error) {
        console.error('获取评论列表失败:', error)
        ElMessage.error('获取评论列表失败')
    } finally {
        commentsLoading.value = false
        loadingMore.value = false
    }
}

const loadMoreComments = () => {
    commentPageNum.value++
    loadingMore.value = true
    loadComments(true)
}

const submitComment = async () => {
    if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        goToLogin()
        return
    }
    if (!commentContent.value.trim()) {
        ElMessage.warning('评论内容不能为空')
        return
    }
    if (!article.id) {
        ElMessage.error('文章ID不存在')
        return
    }

    submitting.value = true
    try {
        let parentId = 0
        if (replyingTo.value) {
            parentId = replyingTo.value.commentId || replyingTo.value.id
        }

        const resData = await addComment({
            article_id: article.id,
            content: commentContent.value.trim(),
            parent_id: parentId
        })
        if (resData && resData.code === 200) {
            ElMessage.success('评论成功')
            commentContent.value = ''
            replyingTo.value = null
            commentPageNum.value = 1
            loadComments()
            commentTotal.value++
        } else {
            ElMessage.error(resData.msg || '评论失败')
        }
    } catch (error: any) {
        console.error('提交评论失败:', error)
        if (error.response && error.response.status === 401) {
            ElMessage.error('请先登录')
            goToLogin()
        } else {
            ElMessage.error('评论失败，请稍后重试')
        }
    } finally {
        submitting.value = false
    }
}

const replyToComment = (comment: any, reply?: any) => {
    if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        goToLogin()
        return
    }
    replyingTo.value = {
        id: reply ? reply.id : comment.id,
        commentId: comment.id,
        username: reply ? reply.username : comment.username,
        isReply: !!reply
    }
    nextTick(() => {
        const commentInput = document.querySelector('.comment-input-section')
        if (commentInput) {
            commentInput.scrollIntoView({ behavior: 'smooth', block: 'center' })
        }
    })
}

const cancelReply = () => {
    replyingTo.value = null
}

const handleDeleteComment = async (commentId: number) => {
    try {
        await ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })

        const resData = await deleteComment({ id: commentId })
        if (resData && resData.code === 200) {
            ElMessage.success('删除成功')
            commentPageNum.value = 1
            loadComments()
            commentTotal.value--
        } else {
            ElMessage.error(resData.msg || '删除失败')
        }
    } catch (error: any) {
        if (error !== 'cancel') {
            console.error('删除评论失败:', error)
            ElMessage.error('删除失败，请稍后重试')
        }
    }
}

const handleFavorite = async () => {
    if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        goToLogin()
        return
    }
    if (!article.id) {
        ElMessage.error('文章ID不存在')
        return
    }

    try {
        let resData
        if (isFavorite.value) {
            resData = await removeFavorite({ article_id: article.id })
        } else {
            resData = await addFavorite({ article_id: article.id })
        }

        if (resData && resData.code === 200) {
            isFavorite.value = !isFavorite.value
            ElMessage.success(isFavorite.value ? '收藏成功' : '取消收藏成功')
            if (isFavorite.value) {
                favoriteCount.value++
            } else {
                favoriteCount.value = Math.max(0, favoriteCount.value - 1)
            }
        } else if (resData && resData.code === 1) {
            ElMessage.info('已收藏过该文章')
        } else {
            ElMessage.error(resData?.msg || '操作失败')
        }
    } catch (error: any) {
        console.error('收藏操作失败:', error)
        if (error.response && error.response.status === 401) {
            ElMessage.error('请先登录')
            goToLogin()
        } else {
            ElMessage.error('操作失败，请稍后重试')
        }
    }
}

const checkFavoriteStatus = async () => {
    if (!article.id) return
    try {
        const countRes = await getFavoriteCount({ article_id: article.id })
        if (countRes && countRes.code === 200) {
            favoriteCount.value = countRes.count || 0
        }

        if (isLoggedIn.value) {
            const checkRes = await checkFavorite({ article_id: article.id })
            if (checkRes && checkRes.code === 200) {
                isFavorite.value = checkRes.isFavorite || false
            }
        }
    } catch (error) {
        console.error('检查收藏状态失败:', error)
    }
}

const scrollToComments = () => {
    if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        goToLogin()
        return
    }
    nextTick(() => {
        const commentsCard = document.querySelector('.comments-card')
        if (commentsCard) {
            commentsCard.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
    })
}

const goToLogin = () => {
    router.push({ path: '/login', query: { redirect: route.fullPath } })
}

const articleDetailFn = async (id: number | string) => {
    loading.value = true
    await articleDetail({ id })
        .then((resData: any) => {
            if (resData && resData.code === 200 && resData.result && resData.result.length > 0) {
                const data = resData.result[0]
                article.author = data.author || ''
                article.cate = data.cate || ''
                article.cate_name = data.cate_name || ''
                article.content = data.content || ''
                article.createAt = data.createAt || ''
                article.id = data.id || 0
                article.src = data.src ? getImageUrl(data.src) : ''
                article.tag = data.tag || ''
                article.title = data.title || ''

                loadComments()
                checkFavoriteStatus()
            } else {
                console.error('获取文章详情失败:', resData)
            }
        })
        .catch((err) => {
            console.error('获取文章详情异常:', err)
        })
        .finally(() => {
            loading.value = false
        })
}

watch(route, (newRoute) => {
    let id = newRoute.query.id as string
    if (id) {
        articleDetailFn(id)
    }
}, { deep: true, immediate: true })

onMounted(() => {
    getUserInfo()
})
</script>

<style lang="less" scoped>
@import "../assets/varable.less";

.detail-view {
    min-height: calc(100vh - 300px);
    padding-bottom: 40px;

    .back-button {
        margin-bottom: 20px;
    }

    .article-card {
        border-radius: 16px;
        margin-bottom: 30px;

        :deep(.el-card__body) {
            padding: 0;
        }
    }

    .article-header {
        padding: 40px 40px 30px;
        border-bottom: 1px solid @border-light;

        .article-title {
            font-size: 36px;
            font-weight: bold;
            color: @text-primary;
            line-height: 1.4;
            margin: 0 0 30px 0;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;

            .meta-item {
                display: flex;
                align-items: center;
                gap: 12px;

                .author-info {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    .author-name {
                        font-size: 16px;
                        font-weight: 600;
                        color: @text-primary;
                    }

                    .publish-date {
                        font-size: 13px;
                        color: @text-light;
                    }
                }
            }

            .meta-actions {
                display: flex;
                gap: 12px;
                align-items: center;
            }
        }
    }

    .article-cover {
        width: 100%;
        height: 480px;
        overflow: hidden;

        .el-image {
            width: 100%;
            height: 100%;

            :deep(img) {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .image-error {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: @bg-primary;
            color: @primary-light;

            .el-icon {
                font-size: 64px;
            }
        }
    }

    .article-content {
        padding: 40px;
        font-size: 16px;
        line-height: 2;
        color: @text-secondary;

        :deep(h1),
        :deep(h2),
        :deep(h3),
        :deep(h4),
        :deep(h5),
        :deep(h6) {
            color: @text-primary;
            font-weight: 600;
            margin: 24px 0 16px;
            line-height: 1.6;
        }

        :deep(h1) {
            font-size: 28px;
        }

        :deep(h2) {
            font-size: 24px;
        }

        :deep(h3) {
            font-size: 20px;
        }

        :deep(p) {
            margin: 16px 0;
            text-align: justify;
        }

        :deep(img) {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: @shadow-sm;
        }

        :deep(a) {
            color: @primary-color;
            text-decoration: none;
            border-bottom: 1px solid @primary-light;
            transition: all 0.3s;

            &:hover {
                color: @primary-dark;
                border-bottom-color: @primary-dark;
            }
        }

        :deep(code) {
            background: @bg-primary;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: @danger-color;
        }

        :deep(pre) {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
            line-height: 1.6;

            code {
                background: none;
                padding: 0;
                color: inherit;
            }
        }

        :deep(blockquote) {
            border-left: 4px solid @primary-color;
            padding-left: 20px;
            margin: 20px 0;
            color: @text-secondary;
            font-style: italic;
            background: @primary-lighter;
            padding: 15px 20px;
            border-radius: 4px;
        }

        :deep(ul),
        :deep(ol) {
            padding-left: 30px;
            margin: 16px 0;

            li {
                margin: 8px 0;
            }
        }

        :deep(table) {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;

            th,
            td {
                border: 1px solid @border-color;
                padding: 12px;
                text-align: left;
            }

            th {
                background: @bg-primary;
                font-weight: 600;
                color: @text-primary;
            }

            tr:hover {
                background: @primary-lighter;
            }
        }
    }

    .article-tags {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 40px;
        border-top: 1px solid @border-light;
        flex-wrap: wrap;

        .el-icon {
            font-size: 18px;
            color: @primary-color;
        }

        span {
            color: @text-secondary;
            font-size: 14px;
        }
    }

    .article-footer {
        padding: 0 40px 30px;

        .footer-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;

            .count-badge {
                margin-left: 4px;
                font-size: 12px;
                opacity: 0.8;
            }
        }
    }

    .comments-card {
        border-radius: 16px;
        margin-bottom: 30px;

        :deep(.el-card__header) {
            background: @bg-primary;
            padding: 20px;
        }

        :deep(.el-card__body) {
            padding: 30px;
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 600;
            color: @text-primary;

            .el-icon {
                font-size: 22px;
                color: @primary-color;
            }
        }

        .comment-input-section {
            margin-bottom: 30px;

            .login-prompt {
                margin-bottom: 20px;
            }

            .comment-form {
                .form-header {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    margin-bottom: 15px;

                    .username {
                        font-size: 16px;
                        font-weight: 600;
                        color: @text-primary;
                    }
                }

                .comment-textarea {
                    margin-bottom: 15px;
                }

                .form-actions {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }

                .reply-info {
                    margin-top: 10px;
                    padding: 10px 15px;
                    background: @primary-lighter;
                    border-radius: 8px;
                    font-size: 14px;
                    color: @text-secondary;

                    .reply-name {
                        color: @primary-color;
                        font-weight: 600;
                    }
                }
            }
        }

        .comments-list {
            .empty-comments {
                padding: 40px 0;
            }

            .comment-items {
                .comment-item {
                    padding: 20px 0;
                    border-bottom: 1px solid @border-light;

                    &:last-child {
                        border-bottom: none;
                    }

                    .comment-main {
                        display: flex;
                        gap: 15px;

                        .comment-content {
                            flex: 1;
                            min-width: 0;

                            .comment-header {
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                margin-bottom: 8px;

                                .comment-author {
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: @text-primary;
                                }

                                .comment-time {
                                    font-size: 13px;
                                    color: @text-light;
                                }
                            }

                            .comment-text {
                                font-size: 15px;
                                line-height: 1.8;
                                color: @text-secondary;
                                margin-bottom: 10px;
                                word-break: break-word;
                            }

                            .comment-actions {
                                display: flex;
                                gap: 15px;
                            }
                        }
                    }

                    .replies-list {
                        margin-left: 55px;
                        margin-top: 15px;
                        padding-left: 15px;
                        border-left: 2px solid @border-light;

                        .reply-item {
                            display: flex;
                            gap: 12px;
                            padding: 12px 0;

                            &:not(:last-child) {
                                border-bottom: 1px solid @border-lighter;
                            }

                            .reply-content {
                                flex: 1;
                                min-width: 0;

                                .reply-header {
                                    display: flex;
                                    align-items: center;
                                    gap: 10px;
                                    margin-bottom: 6px;

                                    .reply-author {
                                        font-size: 14px;
                                        font-weight: 600;
                                        color: @text-primary;
                                    }

                                    .reply-time {
                                        font-size: 12px;
                                        color: @text-light;
                                    }
                                }

                                .reply-text {
                                    font-size: 14px;
                                    line-height: 1.6;
                                    color: @text-secondary;
                                    margin-bottom: 6px;
                                    word-break: break-word;

                                    .reply-to {
                                        color: @primary-color;
                                        font-weight: 600;
                                        margin-right: 4px;
                                    }
                                }

                                .reply-actions {
                                    display: flex;
                                    gap: 12px;
                                }
                            }
                        }
                    }
                }
            }

            .load-more-comments {
                text-align: center;
                padding: 20px 0;
            }
        }
    }

    .related-articles {
        margin-top: 30px;
        margin-bottom: 30px;

        .el-card {
            border-radius: 16px;

            :deep(.el-card__header) {
                background: @bg-primary;
                padding: 20px;
            }
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 600;
            color: @text-primary;

            .el-icon {
                font-size: 22px;
                color: @primary-color;
            }
        }

        .related-list {
            padding: 20px;
        }
    }
}

@media (max-width: 992px) {
    .detail-view {
        .article-header {
            padding: 30px 30px 25px;

            .article-title {
                font-size: 30px;
            }
        }

        .article-cover {
            height: 380px;
        }

        .article-content {
            padding: 30px;
        }

        .article-tags {
            padding: 15px 30px;
        }

        .article-footer {
            padding: 0 30px 25px;
        }

        .comments-card {
            :deep(.el-card__body) {
                padding: 20px;
            }

            .comment-input-section {
                .comment-form {
                    .form-header {
                        margin-bottom: 12px;
                    }
                }
            }

            .comments-list {
                .comment-items {
                    .comment-item {
                        padding: 15px 0;

                        .comment-main {
                            gap: 12px;

                            .comment-content {
                                .comment-header {
                                    flex-wrap: wrap;
                                }
                            }
                        }

                        .replies-list {
                            margin-left: 45px;
                            padding-left: 12px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .detail-view {
        .article-header {
            padding: 25px 20px;

            .article-title {
                font-size: 26px;
            }

            .article-meta {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .article-cover {
            height: 300px;
        }

        .article-content {
            padding: 25px 20px;
            font-size: 15px;
        }

        .article-tags {
            padding: 15px 20px;
        }

        .article-footer {
            padding: 0 20px 20px;

            .footer-actions {
                flex-direction: column;
                width: 100%;

                .el-button {
                    width: 100%;
                }
            }
        }

        .comments-card {
            :deep(.el-card__header) {
                padding: 15px;
            }

            :deep(.el-card__body) {
                padding: 15px;
            }

            .comment-input-section {
                margin-bottom: 20px;

                .comment-form {
                    .form-header {
                        margin-bottom: 10px;
                    }
                }
            }

            .comments-list {
                .comment-items {
                    .comment-item {
                        padding: 12px 0;

                        .comment-main {
                            gap: 10px;

                            .comment-content {
                                .comment-text {
                                    font-size: 14px;
                                }
                            }
                        }

                        .replies-list {
                            margin-left: 40px;
                            padding-left: 10px;

                            .reply-item {
                                padding: 10px 0;

                                .reply-content {
                                    .reply-text {
                                        font-size: 13px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 576px) {
    .detail-view {
        .back-button {
            margin-bottom: 15px;
        }

        .article-card {
            border-radius: 0;
        }

        .article-header {
            padding: 20px 15px;

            .article-title {
                font-size: 22px;
            }
        }

        .article-cover {
            height: 220px;
        }

        .article-content {
            padding: 20px 15px;
            font-size: 14px;

            :deep(pre) {
                padding: 15px;
                font-size: 13px;
            }
        }

        .article-tags {
            padding: 12px 15px;
        }

        .article-footer {
            padding: 0 15px 15px;
        }

        .comments-card {
            border-radius: 0;

            :deep(.el-card__header) {
                padding: 12px;
            }

            :deep(.el-card__body) {
                padding: 12px;
            }

            .comments-list {
                .comment-items {
                    .comment-item {
                        padding: 10px 0;

                        .replies-list {
                            margin-left: 35px;
                            padding-left: 8px;
                        }
                    }
                }
            }
        }

        .related-articles {
            .el-card {
                border-radius: 0;
            }
        }
    }
}
</style>
